<!--
 	* @author  dumeng
-->
<template>
  <div class="jdconfig-record">
    <el-collapse-transition>
      <section v-show="searchshow" class="main-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search" />
        </span>
        <el-input
          v-model.trim="listQuery.userName"
          placeholder="输入姓名搜索"
          class="search-input"
          @keyup.enter.native="handleFilter"
        />
        <section class="search-btn">
          <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
          <span class="search-more" @click="searchshow = !searchshow">
            更多筛选条件
            <i class="el-icon-arrow-down" />
          </span>
        </section>
      </section>
    </el-collapse-transition>
    <el-collapse-transition>
      <section v-show="!searchshow" class="main-search separate">
        <section class="search-inner">
          <el-row>
            <el-col :span="8">
              <section class="search-inner-item">
                <div class="item-label">姓名</div>
                <el-input
                  v-model.trim="search.userName"
                  style="width: 90%;"
                  class="filter-item"
                  placeholder="请输入姓名搜索"
                />
              </section>
            </el-col>
            <el-col :span="8">
              <section class="search-inner-item">
                <div class="item-label">订单号</div>
                <el-input
                  v-model.trim="search.orderNum"
                  style="width: 90%;"
                  class="filter-item"
                  placeholder="请输入订单号搜索"
                />
              </section>
            </el-col>
            <el-col :span="8">
              <section class="search-inner-item">
                <div class="item-label">流水号</div>
                <el-input
                  v-model.trim="search.runningNumber"
                  style="width: 90%;"
                  class="filter-item"
                  placeholder="请输入流水号搜索"
                />
              </section>
            </el-col>
            <el-col :span="8">
              <section class="search-inner-item">
                <div class="item-label">订单状态</div>
                <el-select v-model="search.orderStatus" placeholder="请选择状态搜索" style="width: 80%;">
                  <el-option label="待付款" :value="1" />
                  <el-option label="付款中" :value="2" />
                  <el-option label="付款成功" :value="3" />
                  <el-option label="付款失败" :value="4" />

                </el-select>
              </section>
            </el-col>
          </el-row>
        </section>
        <section class="search-btn">
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
          <span class="search-more" @click="searchshow = !searchshow">
            精简筛选条件
            <i class="el-icon-arrow-up" />
          </span>
        </section>
      </section>
    </el-collapse-transition>
    <section class="main-buttons">
      <section class="main-buttons-title">
        <span>订单明细</span>
      </section>
      <section class="main-buttons-btns">
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleExportFire">导出</el-button>
        <el-button style="padding: 10px 30px" @click="handleCancel">返回</el-button>
      </section>
    </section>
    <section class="main-table">
      <v-table
        :list="list"
        tag="jdconfigOrderDetail"
        :list-loading="listLoading"
        :filter-column="filtercolumn"
        :selection="false"
      />
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </section>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import { jdOrderDetail, jdOrderDetailExportMask, jdOrderDetailExportNoMask } from '../api/record'
import permission from '@/directive/permission/index.js'
import CryptoJS from '@/utils/aesJiaJM.js'
import { exportSign } from '@/utils/fileImportOrExportSign'
import { exportCheck } from '@/utils/sensitiveInfoExportCheck'
export default {
  name: 'JdconfigRecord',
  components: { Pagination, VTable },
  directives: { permission },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        userName: ''
      },
      searchshow: true,
      search: {
        userName: '',
        orderNum: '',
        runningNumber: '',
        orderStatus: ''
      },
      list: [],
      total: 0,
      listLoading: false,
      view: '/API-DOCUMENT/document/file/download?id=',
      id: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getList()
  },
  methods: {
    /**
			 * 导出
			 * @param row
			 */
    handleExportFire() {
      const query = {
        giveId: this.id
      }
      if (this.searchshow) {
        query['userName'] = this.listQuery.userName
      } else {
        query['userName'] = this.search.userName
        query['orderNum'] = this.search.orderNum
        query['runningNumber'] = this.search.runningNumber
        query['orderStatus'] = this.search.orderStatus
      }
      exportCheck('WELFARE_PAYMENT', '', jdOrderDetailExportMask, jdOrderDetailExportNoMask, exportSign(query).obj, '订单明细.xlsx')
    },
    handleCancel() {
      this.$router.back()
    },
    filtercolumn(scope, item) {
      if (item === 'phoneNumber') {
        return CryptoJS.$aesJieM(scope.row[item])
      } else {
        return scope.row[item]
      }
    },

    handleReset() {
      this.listQuery.page = 1
      this.listQuery.userName = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.getList()
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        giveId: this.id
      }
      if (this.searchshow) {
        query['userName'] = this.listQuery.userName
      } else {
        query['userName'] = this.search.userName
        query['orderNum'] = this.search.orderNum
        query['runningNumber'] = this.search.runningNumber
        query['orderStatus'] = this.search.orderStatus
      }
      return new Promise((resolve, reject) => {
        jdOrderDetail(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
  @import '@/styles/mixin.scss';

  .jdconfig-record {
    padding: 0 10px 10px;

    .main-search {
      background-color: #fff;
      padding: 0 10px;

      .svg-container {
        padding: 0 5px 0 10px;
        color: #bfced6;
        vertical-align: middle;
        display: inline-block;
      }

      .search-input {
        width: 60%;
        position: relative;

        &:after {
          content: '';
          position: absolute;
          left: -25px;
          right: 0;
          bottom: 8px;
          height: 1px;
          background: rgba(226, 227, 232, 1);
        }

        input {
          outline: none;
          background: transparent;
          border: none;
          outline: medium;
          padding: 0;

          &:focus {
            outline: none;
            background-color: transparent;
          }
        }
      }

      .search-btn {
        display: inline-block;
        float: right;

        .el-button.is-round {
          padding: 10px 30px;
          margin-right: 34px;
        }

        .search-more {
          font-size: 14px;
          font-weight: 500;
          @include font-color($mainColor);
          cursor: pointer;
          margin-left: 10px;
        }
      }

      &.merge {
        height: 50px;
        line-height: 50px;
      }

      &.separate {
        .search-inner {
          padding-top: 10px;

          .search-inner-item {
            .item-label {
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #a6a6a6;
              font-weight: 400;
            }

            .el-input {
              position: relative;

              &.el-date-editor input {
                padding-left: 30px;
              }

              .el-input__inner {
                border: none;
                padding: 0;
              }

              &:after {
                content: '';
                height: 1px;
                background-color: #e2e3e8;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
              }
            }
          }
        }

        .search-btn {
          text-align: center;
          display: block;
          float: none;
          height: 56px;
          line-height: 56px;
        }
      }
    }

    .main-buttons {
      display: flex;
      line-height: 36px;
      margin-top: 10px;

      .main-buttons-title {
        flex: 1;
        height: 36px;
        line-height: 36px;
        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
</style>
